<template>
  <div>
    <card-mysql-setup :enable="!isMysqlAvailable" @done="actionMysqlSetupDone"></card-mysql-setup>

    <el-card class="box-card" style="margin-bottom:10px;position:relative;">
      <div slot="header" class="clearfix">
        <span>用户列表</span>
        <el-button style="float: right;" size="mini" @click="actionRefreshList">刷新</el-button>
        <el-button style="float: right;margin-right:10px;" size="mini" @click="actionCreate">新建</el-button>
      </div>
      
      <el-table :data="users" style="width: 100%">
        <el-table-column prop="User" label="名称" width="200"></el-table-column>
        <el-table-column prop="Host" label="主机" width="200"></el-table-column>
        <el-table-column align="right" label="操作">
          <template slot-scope="scope">
            <el-button size="mini" @click="actionPrivilegeEdit(scope.$index)">权限</el-button>
            <el-button size="mini" @click="actionDelete(scope.$index)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
    <mysql-user-edit-dialog ref="dialogEdit" @created="actionRefreshList"></mysql-user-edit-dialog>
    <dialog-mysql-user-privilege-edit ref="dialogPrivilegeEdit"></dialog-mysql-user-privilege-edit>
  </div>
</template>
<script>
import DialogMysqlUserPrivilegeEdit from './DialogMysqlUserPrivilegeEdit.vue'
import CardMysqlSetup from './CardMysqlSetup.vue'
import MysqlConnection from './MysqlConnection.js'
import MysqlUserEditDialog from './MysqlUserEditDialog.vue'
export default {
    name : 'MysqlUserManagement',
    components : {
        'card-mysql-setup' : CardMysqlSetup,
        'mysql-user-edit-dialog' : MysqlUserEditDialog,
        'dialog-mysql-user-privilege-edit' : DialogMysqlUserPrivilegeEdit,
    },
    data() {
        return {
            isMysqlAvailable : true,
            connection : null,
            users : [],
        };
    },
    async mounted() {
        this.connectToDatabase();
    },
    destroyed() {
        this.connection.disconnect();
    },
    methods : {
        // 数据库安装完成后的回调
        actionMysqlSetupDone() {
            this.isMysqlAvailable = true;
            this.connectToDatabase();
        },

        // 连接到数据库
        async connectToDatabase() {
            let server = this.$store.getters.serverCurrent;
            let config = await server.getConfiguration('mysql');
            if ( null == config ) {
                this.isMysqlAvailable = false;
                return;
            }

            this.connection = new MysqlConnection({
                host     : config.host,
                user     : config.user,
                password : config.password,
                database : config.database
            });
            await this.actionRefreshList();
        },

        // 刷新列表
        async actionRefreshList() {
            this.users = await this.connection.execute('SELECT * FROM mysql.user');
        },

        // 创建用户
        async actionCreate () {
            this.$refs.dialogEdit.create(this.connection);
        },

        // 删除用户
        async actionDelete( index ) {
            let user = this.users[index];
            try {
                await this.$confirm(`此操作将删除用户 “${user.User}@${user.Host}”, 是否继续?`, '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                });
            } catch {
                return;
            }
            
            let sql = `DROP USER '${user.User}'@'${user.Host}'`;
            await this.connection.execute(sql);
            await this.actionRefreshList();
        },

        // 权限编辑
        actionPrivilegeEdit( index ) {
            let user = this.users[index];
            this.$refs.dialogPrivilegeEdit.open(this.connection, user);
        },
    }
}
</script>